<template>
  <div>
    <t-button @click="nextNode" type="primary">下一节点</t-button>
    <t-button @click="resetNode">重置</t-button>
    <span>当前为{{ active }}节点</span>
    <t-steps :active="active" :align="'center'">
      <t-step title="第一步" description="打开微信扫一扫" >
        <template #icon> &#127774; </template>
      </t-step>
      <t-step title="第二步" description="添加好友" icon="delete-filling"/>
      <t-step title="第三步" description="选择我的头像" icon="warning-filling"/>
      <t-step title="第四步" description="转款1000万" icon="prompt-filling"/>
    </t-steps>
  </div>
</template>
<script setup>
import { ref } from "vue";
let active = ref(0);
const nextNode = () => {
  if (active.value < 4) {
    active.value++;
  }
}
const resetNode = () => {
  active.value = 0;
}
</script>